<template>
<div class="app-container flex-col fill-width-height" style="padding-top: 10px;">
  <el-row :gutter="24" class="" v-if="isEdit" style="margin: 0; padding: 5px 0px;">
    <!-- 新增、修改、删除按钮 -->
    <el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="4" style="">
      <div class="fill-width flex-row" style="row-gap: 12px;">
        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
        <el-button type="success" plain icon="el-icon-edit" size="mini" @click="handleUpdate">修改</el-button>
        <el-button type="danger" plain icon="el-icon-delete" size="mini" @click="handleDelete">删除</el-button>
        <el-button type="primary" plain icon="el-icon-edit" size="mini" @click="similarityGraphManage">相似图管理</el-button>
        <el-button type="primary" plain icon="el-icon-edit" size="mini" @click="threeModel">3d模型</el-button>
        <el-button type="primary" plain icon="el-icon-edit" size="mini" @click="openPanoramicViewerModelVisible">3d全景</el-button>
      </div>
    </el-col>

    <el-col :xs="24" :sm="7" :md="5" :lg="5" :xl="4" style="padding-bottom: 10px;" v-show="showSearch">
      <div>
        <el-radio-group v-model="isTagsStatus" size="small" @input="tagsStatusChange">
          <el-radio-button v-for="(ta,index) in tagsArr" :key="index" :label="ta.value" :value="ta.value">{{ ta.label }}</el-radio-button>
        </el-radio-group>
      </div>
    </el-col>

    <!-- 搜索表单 -->
    <el-col :xs="24" :sm="17" :md="11" :lg="11" :xl="16" >
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" class="search-form" v-show="showSearch">
        <el-form-item label="标题" prop="title" class="form-item">
          <el-input
            v-model="queryParams.title"
            placeholder="请输入标题"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="标签" prop="tag" class="form-item">
          <el-input
            v-model="queryParams.tag"
            placeholder="请输入标签"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item class="form-item">
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
      <right-toolbar :showSearch.sync="showSearch" ></right-toolbar>
    </el-col>
  </el-row>

  <div class="flex-1 flex-col" style="min-height: 0;">
    <div class="fill-width">
      <TypeMenu :typeList="typeList" v-model="activeId" @itemClick="clickType"/>
    </div>
    <el-divider/>
    <TableIndex
      :ref="`tableIndexRef`"
      :typeId="activeId"
      :isSelect="isSelect"
      :isEdit="isEdit"
      :extQueryParams="queryParams"
      :isTagsStatus="isTagsStatus"
      class="flex-1"
      style="min-height: 400px;"
    />
  </div>

  <ItemForm ref="itemFormRef" :mode="mode" :itemObjList="itemObjList" />
  <SimilarityGraphManage ref="similarityGraphManage"/>

  <el-dialog :title="'3d模型'" :visible.sync="openModelVisible" append-to-body :width="'90%'" class="threedModelDialog">
    <GlbViewer backgroundColor="linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%)" />
  </el-dialog>

  <el-dialog :title="'3d全景查看器'" :visible.sync="panoramicViewerModelVisible" append-to-body :width="'90%'" class="threedModelDialog" >
    <PanoramaViewer :allowFileUpload="true"/>
  </el-dialog>

</div>
</template>

<script>
import { getList } from "@/api/imgManage/imgType";
import { listToTree } from '@/utils'
import TypeMenu from '../typeMenu'

export default {
  name: 'imgManages',
  components: {
    TypeMenu,
    ItemForm: () => import('./itemForm'),
    TableIndex: () => import('./TableIndex'),
    SimilarityGraphManage: () => import('./similarityGraphManage'),
    GlbViewer: () => import('./GlbViewer'),
    PanoramaViewer: () => import('./PanoramaViewer'),
  },
  props: {
    isSelect: {
      default: () => true
    },
    isEdit:{
      default: () => true
    }
  },
  data() {
    return {
      openModelVisible: false,
      panoramicViewerModelVisible: false,
      showSearch: false,
      isTagsStatus: 'all',
      tagsArr: [
        { label: '全部', value: 'all'},
        { label: '已标签', value: 'tagged'},
        { label: '未标签', value: 'untamed'}
      ],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      open: false,
      activeId: 'all',
      allObj: { value:'all', label: '全部' ,id:'all', name: '全部', level: 1 },
      typeForm: {},
      formLabelWidth: '100px',
      dialogFormVisible: false,
      typeList: [],
      activeIndex: '',
      mode: '',
      itemObjList: [],
      queryParams: {

      }
    }
  },
  computed: {
  },
  methods: {
    openPanoramicViewerModelVisible(){
      this.panoramicViewerModelVisible = true
    },
    threeModel(){
      this.openModelVisible = true
    },
    similarityGraphManage(){
      this.$refs.similarityGraphManage.init()
    },
    handleAdd() {
      this.mode = 'add'
      this.$nextTick(() => {
        this.$refs.itemFormRef.init()
      })
    },
    handleUpdate(){
      this.mode = 'edit'
      const selectList = this.$refs.tableIndexRef.getAllSelectData()
      if(selectList?.length === 0){
        return this.$modal.msgWarning("请选择数据！");
      }
      this.multiple = true
      this.itemObjList = selectList
      this.$nextTick(() => {
        this.$refs.itemFormRef.init()
      })
    },
    handleDelete(){
       this.$refs.tableIndexRef.deleteImage()
    },
    handleQuery(){
      this.$refs.tableIndexRef.getTablePage()
    },
    resetQuery(){
      this.resetForm("queryForm");
      this.handleQuery();
    },
    handleClick(e){
    },
    resetSelectData(){
      this.$refs.tableIndexRef?.resetSelectData()
    },
    getAllSelectData() {
      const tableIndexRef = this.$refs.tableIndexRef
      if(tableIndexRef){
        return tableIndexRef.getAllSelectData()
      }
      return []
    },
    tagsStatusChange(){
      this.$nextTick(() => {
        setTimeout(() => {
          this.clickType()
        },20)
      })
    },
    clickType(){
      this.$refs.tableIndexRef.getTablePage()
    },
    async initTypeList(){
      const dataList = await getList({ bustype: 'imgType' }).then(res => res.data )
      dataList.forEach((item) => {
        item.label = item.name
        item.value = item.id
      })
      const treeList = listToTree(dataList,'id','parentid')
      treeList.unshift(this.allObj)
      this.typeList = treeList
    },
  },
  mounted() {
    this.initTypeList()
  }
}
</script>

<style scoped lang="scss">
::v-deep {
  .el-tabs.el-tabs--top{
    height: 100%;
    display: flex;
    flex-direction: column;
    .el-tabs__content{

    }
  }
  .el-form-item{
    margin-bottom: 0 !important;
  }
  .tab-pane {
    height: 97%;
  }
}
::v-deep{
  .top-right-btn{
    position: absolute;
    right: 10px;
  }
}
</style>

<style>
.threedModelDialog .el-dialog{
  height: 90%
}
.threedModelDialog .el-dialog__body{
  height: 90%
}
</style>
